<template>
  <view class="home_category">
    <navigator class="cate_item" v-for="item in  category" :key="item.id"
      :url="`/pages/imgCategory/index?id=${item.id}`">
      <image :src="item.cover" mode="aspectFill"></image>
      <view class="cate_name">{{item.name}}</view>
    </navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        category: [],
      }
    },
    mounted() {
      uni.setNavigationBarTitle({
        title: "分类"
      })
      this.getList()
    },
    methods: {
      getList() {
        this.request({
          url: "http://service.picasso.adesk.com/v1/vertical/category"
        }).then(result => {
          // console.log(result)
          this.category = result.res.category

          // console.log(this.category)
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .home_category {
    display: flex;
    flex-wrap: wrap;

    .cate_item {
      width: 33.3%;
      position: relative;
      border: 5px solid #fff;

      image {
        height: 240rpx;
      }

      .cate_name {
        position: absolute;
        width: 100%;
        height: 50rpx;
        bottom: 0;
        left: 0;
        color: #fff;
        background-image: linear-gradient(to right top, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
        font-size: 40rpx;
        display: flex;
        align-items: center;
        padding-left: 20rpx;
      }
    }
  }
</style>
